import React, { Component } from 'react';
import {
  Table,
} from 'antd';

interface TotalSpendingProps {
  loanRepayment: any;
  loading: any;
}

class TotalSpending extends Component<TotalSpendingProps> {
  render() {
    const { loanRepayment, loading } = this.props;
    const columns: any = [{ title: '月份', dataIndex: 'month', align: 'center' }];

    loanRepayment.loan_repayment.map((item: any) => {
      columns.push({
        title: `借贷合同${item.contract_num}`,
        children: [
          {
            title: '本金',
            dataIndex: 'principal',
            align: 'center',
          },
          {
            title: '利息',
            dataIndex: 'interest',
            align: 'center',
          },
        ],
      });
      return null;
    });

    if (loanRepayment.service_fee_type === 1) {
      columns.push(
        {
          title: '服务费',
          dataIndex: 'service_fee',
          align: 'center',
          render: (text: any, row: any, index: any) => {
            const { loanRepayment: { loan_repay_list } } = this.props;
            const values = index === 0
              ? { children: text, props: { rowSpan: loan_repay_list.length } }
              : { props: { colSpan: 0 } };
            return values;
          },
        },
        {
          title: '现金',
          dataIndex: 'total_cash_income',
          align: 'center',
          render: (text: any, row: any, index: any) => {
            const { loanRepayment: { loan_repay_list } } = this.props;
            const values = index === 0
              ? { children: text, props: { rowSpan: loan_repay_list.length } }
              : { props: { colSpan: 0 } };
            return values;
          },
        },
      );
    }

    columns.push({
      title: '总支出',
      dataIndex: 'total_expend',
      align: 'center',
      render: (text: any, row: any, index: any) => {
        const { loanRepayment: { loan_repay_list } } = this.props;
        const values = index === 0
          ? { children: text, props: { rowSpan: loan_repay_list.length } }
          : { props: { colSpan: 0 } };
        return values;
      },
    });


    const dataSource = loanRepayment.loan_repay_list.length > 0
      ? loanRepayment.loan_repay_list.map((item: any, index: number) => {
        item = {
          id: index,
          month: item[0],
          principal: item[1],
          interest: item[2],
          service_fee: loanRepayment.service_fee,
          total_cash_income: loanRepayment.total_cash_income,
          total_expend: loanRepayment.total_expend,
        };
        return item;
      }) : [];

    return (
      <Table
        rowKey="id"
        bordered
        className="statementTable tableList"
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        pagination={false}
      />
    );
  }
}

export default TotalSpending;
